<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>workerman-chat PHP聊天室 Websocket(HTLM5/Flash)+PHP多进程socket实时推送技术</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/jquery-sinaEmotion-2.1.0.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">

    <script type="text/javascript" src="/js/swfobject.js"></script>
    <script type="text/javascript" src="/js/web_socket.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery-sinaEmotion-2.1.0.min.js"></script>

    <script type="text/javascript">
        if (typeof console == "undefined") {
            this.console = {
                log: function(msg) {}
            };
        }
        $.getUrlParam = function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的    正则表达式对象  
            var r = window.location.search.substr(1).match(reg); //匹配目标参数  
            if (r != null) return unescape(r[2]);
            return null; //返回参数值  
        };
        // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
        WEB_SOCKET_SWF_LOCATION = "/swf/WebSocketMain.swf";
        // 开启flash的websocket debug
        WEB_SOCKET_DEBUG = true;
        var ws, name, client_list = {};

        // 连接服务端
        function connect() {
            // 创建websocket
            //  ws = new WebSocket("ws://" + document.domain + ":7273");
            ws = new WebSocket("wss://stk.smgtech.net/wss");
            // 当socket连接打开时，输入用户名
            ws.onopen = onopen;
            // 当有消息时根据消息类型显示不同信息
            ws.onmessage = onmessage;
            ws.onclose = function() {
                console.log("连接关闭，定时重连");
                connect();
            };
            ws.onerror = function() {
                console.log("出现错误");
            };
        }

        // 连接建立时发送登录信息
        function onopen() {
            if (!name) {
                show_prompt();
            }
            var token = $.getUrlParam('token');

            // 登录
            var login_data = '{"type":"C2S_LOGIN","token":"' + token + '","client_name":"' + name.replace(/"/g, '\\"') + '","room_id":"' + $.getUrlParam('room_id') + '","user_id":"' + $.getUrlParam('user_id') + '"}';
            // console.log("websocket握手成功，发送登录数据:" + login_data);
            ws.send(login_data);
        }

        // 服务端发来消息时
        function onmessage(e) {
            console.log(e.data);
            var data = JSON.parse(e.data);
            switch (data['type']) {
                // 服务端ping客户端
                case 'ping':
                    ws.send('{"type":"pong"}');
                    break;;
                    // 登录 更新用户列表
                case 'C2S_LOGIN':
                    //{"type":"login","client_id":xxx,"client_name":"xxx","client_list":"[...]","time":"xxx"}
                    say(data['client_id'], data['client_name'], data['client_name'] + ' 加入了聊天室', data['time']);
                    console.log('client_list', data['client_list'])
                    if (data['client_list']) {
                        client_list = data['client_list'];
                    } else {
                        client_list[data['client_id']] = data['client_name'];
                    }
                    flush_client_list();
                    console.log(data['client_name'] + "登录成功");
                    break;
                    // 发言
                case 'say':
                    //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
                    say(data['from_client_id'], data['from_client_name'], data['content'], data['time'], data['is_teacher']);
                    let chatBox = document.querySelector("#dialog");
                    chatBox.scrollTop = chatBox.scrollHeight;
                    break;
                    // 用户退出 更新用户列表
                case 'logout':
                    //{"type":"logout","client_id":xxx,"time":"xxx"}

                    say(data['from_client_id'], data['from_client_name'], data['from_client_name'] + ' 退出了', data['time']);
                    delete client_list[data['from_client_id']];

                    flush_client_list();
            }
        }

        // 输入姓名
        function show_prompt() {
            name = prompt('输入你的名字：', '');
            if (!name || name == 'null') {
                name = '游客';
            }
        }

        // 提交对话
        function onSubmit() {
            var room_id = $.getUrlParam('room_id');
            var user_id = $.getUrlParam('user_id');
            var row_id = $.getUrlParam('row_id');
            var token = $.getUrlParam('token');

            var input = document.getElementById("textarea");
            var to_client_id = $("#client_list option:selected").attr("value");
            var to_user_id = $("#client_list option:selected").attr("userId");
            var to_client_name = $("#client_list option:selected").text();
            // ws.send('{"type":"say","to_client_id":"' + to_client_id + '","is_teacher":"4","to_client_name":"' + to_client_name + '","content":"' + input.value.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '"}');
            // ws.send('{"type":"getRoomCount","to_client_id":"' + to_client_id + '","is_teacher":"4","room_id":"4","to_client_name":"' + to_client_name + '","content":"' + input.value.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '"}');
            // ws.send('{"type":"getSeatInfo","to_client_id":"' + to_client_id + '","is_teacher":"4","room_id":"4","to_client_name":"' + to_client_name + '","content":"' + input.value.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '"}');
            ws.send('{"type":"C2S_SelectRoom","to_client_id":"' + to_client_id + '","token":"' + token + '","user_id":"' + user_id + '","client_name":"client_name","room_id":"' + room_id + '","status":"5","to_client_name":"' + to_client_name + '"}');

            ws.send('{"type":"C2S_SelectSeat","to_client_id":"' + to_client_id + '","token":"' + token + '","user_id":"' + user_id + '","client_name":"client_name","room_id":"4","row":"' + row_id + '","col":"1","status":"5","to_client_name":"' + to_client_name + '"}');

            input.value = "";
            input.focus();
        }


        // 刷新用户列表框
        function flush_client_list() {
            var userlist_window = $("#userlist");
            var client_list_slelect = $("#client_list");
            userlist_window.empty();
            client_list_slelect.empty();
            userlist_window.append('<h4>在线用户</h4><ul>');
            client_list_slelect.append('<option value="all" id="cli_all">所有人</option>');
            for (var p in client_list) {
                userlist_window.append('<li id="' + client_list[p].client_id + '">' + client_list[p].client_name + '</li>');
                client_list_slelect.append('<option value="' + client_list[p].client_id + '" userId="' + client_list[p].user_id + '">' + client_list[p].client_name + '</option>');
            }
            $("#client_list").val(select_client_id);
            userlist_window.append('</ul>');
        }

        // 发言
        function say(from_client_id, from_client_name, content, time, teacher) {
            //解析新浪微博图片
            content = content.replace(/(http|https):\/\/[\w]+.sinaimg.cn[\S]+(jpg|png|gif)/gi, function(img) {
                return "<a target='_blank' href='" + img + "'>" + "<img src='" + img + "'>" + "</a>";
            });

            //解析url
            content = content.replace(/(http|https):\/\/[\S]+/gi, function(url) {
                if (url.indexOf(".sinaimg.cn/") < 0)
                    return "<a target='_blank' href='" + url + "'>" + url + "</a>";
                else
                    return url;
            });

            var color = (4 == teacher) ? 'red' : '';

            // $("#dialog").append('<div class="speech_item"><img src="http://lorempixel.com/38/38/?'+from_client_id+'" class="user_icon" /> '+from_client_name+' <br> '+time+'<div style="clear:both;"></div><p class="triangle-isosceles top">'+content+'</p> </div>').parseEmotion();

            $("#dialog").append('<div class="speech_item"><b>' + from_client_name + '：</b> <i style="float: right"> ' + time + '</i><div style="clear:both;"></div><p class="triangle-isosceles top" style="color:' + color + '">' + content + '</p> </div>').parseEmotion();


        }

        $(function() {
            select_client_id = 'all';
            $("#client_list").change(function() {
                select_client_id = $("#client_list option:selected").attr("value");
            });
            $('.face').click(function(event) {
                $(this).sinaEmotion();
                event.stopPropagation();
            });

            // 踢人
            $("#kick").click(function() {
                var room_id = $.getUrlParam('room_id');
                var user_id = $.getUrlParam('user_id');
                var row_id = $.getUrlParam('row_id');
                ws.send('{"type":"C2S_Kick","user_id":"' + user_id + '","room_id":"' + room_id + '","row":"' + row_id + '","col":"1"}');
            });

        });
    </script>
</head>

<body onload="connect();">
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-1 column">
            </div>
            <div class="col-md-6 column">
                <div class="thumbnail">
                    <div class="caption" id="dialog"></div>
                </div>
                <form onsubmit="onSubmit(); return false;">
                    <select style="margin-bottom:8px" id="client_list">
                        <option value="all">所有人</option>
                    </select>
                    <textarea class="textarea thumbnail" id="textarea"></textarea>
                    <div class="say-btn">
                        <!-- <input type="button" class="btn btn-default face pull-left" value="表情" /> -->
                        <input type="submit" class="btn btn-default" value="发表" />
                        <input type="button" class="btn btn-default" value="踢出" id="kick" />
                    </div>
                </form>
                <div>
                </div>
            </div>
            <div class="col-md-3 column">
                <div class="thumbnail">
                    <div class="caption" id="userlist"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // 动态自适应屏幕
        document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
        $('#room_id').text($.getUrlParam('room_id'));
        $("textarea").on("keydown", function(e) {
            // 按enter键自动提交
            if (e.keyCode === 13 && !e.ctrlKey) {
                e.preventDefault();
                $('form').submit();
                return false;
            }

            // 按ctrl+enter组合键换行
            if (e.keyCode === 13 && e.ctrlKey) {
                $(this).val(function(i, val) {
                    return val + "\n";
                });
            }
        });
    </script>
</body>

</html>